<template>
    <div class="bei">

        <div class="top">
            <span>简体中文(中国)</span>
        </div>
         <div class="login">
        <img src="../logo.jpg" alt="">
        <div class="inp  te"><input type="text" v-model="phone"   placeholder="输入手机号"></div>
        <div class="inp"><input type="text" placeholder="输入密码" v-model="password"></div>
        <button  @click="login()">登录</button>

           </div>
</div>
 
</template>

<script setup>
import axios from "axios";
import {ref} from "vue" 
import { useRouter, useRoute } from "vue-router";
var route = useRoute()
var router = useRouter()

  var phone = ref()
  var password = ref()
    var loginarr = ref({
          phone:phone,
          password:password
    })
     var login = ()=>{
       
          axios.post('/api/user/login',loginarr.value).then((res)=>{
              if(res.status == 200){
                   console.log(res.data)
                  router.push('/index/home')
              }
              
           })
      
         
         
     }






</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
body{
    height: 100%; 
    
    background-size: cover;
}
.bei{
    width: 100%;
    height: 770px;
 background-image: url(../login-bac.webp); 
    background-size:100% 100% ;
    background-repeat: no-repeat;
    /* height: 100%; */
    /* width: 100%; */
}
.top{
    background-color: #999;
    height: 30px;
    width: 100%;
    color: aliceblue;
    line-height: 30px;
   
}
.top span{
     float: right;
     margin-right: 50px;

}
.login{
    width: 500px;
    height: 300px;
    /* background-color: rgb(62, 102, 245); */
    border-radius: 10px;
text-align: center;
/* line-height: 300px; */
     margin: 0 auto;
}
.inp{
    margin-top: 20px;
}
.inp input{
    width: 400px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 20px;
    
}
.login img{
    height: 150px;
    border-radius: 20px;
    margin-top: 150px;
}
.login button{
    width: 400px;
    height: 30px;
    border-radius: 20px;
    margin-top: 20px;
    border: none;
    background-color: skyblue;
}

/* .te{
    margin-top: 300px;
} */
</style>